<template>
  <el-scrollbar v-if="isNotEmpty(buttons)"
                class="form-list-button-wrapper">
    <FormListButtonDelegate :selections="selections"
        @reloa="reload" :formDefinition="formDefinition"
                            v-for="button in buttons" :button="button">
    </FormListButtonDelegate>
  </el-scrollbar>
</template>
<script setup>
import {DefaultFormDefinition, DefaultMenuDefinition} from '@/components/form/DefaultFormDefinition';
import {shallowRef, watchEffect} from 'vue';
import {isNotEmpty} from '@/utils/CommonUtils';
import FormListButtonDelegate from '@/components/platwork/FormListButton/FormListButtonDelegate.vue';

defineOptions({
  name: 'FormListButton'
});

const emits = defineEmits(['reload'])

const props = defineProps({
  formMenu: JSON.parse(JSON.stringify(DefaultMenuDefinition)),
  formDefinition: JSON.parse(JSON.stringify(DefaultFormDefinition)),
  selections: {
    type: Array,
    default: () => [],
  },
});
const buttons = shallowRef();

watchEffect(() => {
  setMenuButtons();
});

function reload() {
  emits('reload')
}

function setMenuButtons() {
  let formMenu = props.formMenu;
  if (isNotEmpty(formMenu.menuButtons)) {
    buttons.value = formMenu.menuButtons;
  } else {
    buttons.value = undefined;
  }
}

</script>

<style>
.form-list-button-wrapper {
  height: 35px;
  display: flex;
  padding: 0 0 0 10px;
  align-items: center;
}
</style>
